<template>
  <div>
    <h3>动态组件</h3>
    <p>page：{{ page }}</p>
    <ul>
      <li @click="page = 'ChildPageA'">组件A</li>
      <li @click="page = 'ChildPageB'">组件B</li>
      <li @click="page = 'ChildPageC'">组件C</li>
      <li @click="page = 'ChildPageD'">组件D</li>
    </ul>
    <div class="box">
      <!-- <ChildPageA v-if="page == 'ChildPageA'"></ChildPageA>
      <ChildPageB v-if="page == 'ChildPageB'"></ChildPageB>
      <ChildPageC v-if="page == 'ChildPageC'"></ChildPageC>
      <ChildPageD v-if="page == 'ChildPageD'"></ChildPageD> -->

      <!-- <ChildPageA v-show="page == 'ChildPageA'"></ChildPageA>
      <ChildPageB v-show="page == 'ChildPageB'"></ChildPageB>
      <ChildPageC v-show="page == 'ChildPageC'"></ChildPageC>
      <ChildPageD v-show="page == 'ChildPageD'"></ChildPageD> -->

      <!--
        component 提供一个位置，用于描述该位置会被其它组件进行替换显示 
                  类似于指令 v-if 完成组件得创建和销毁得反复执行 - 比较性能
        
      -->
      <!-- 无缓存得动态组件使用 -->
      <!-- <component :is="page"></component> -->
      <!-- 
        通过keep-alive 包裹动态组件，实现组件缓存 
            效果类似于v-show完成组件得数据缓存，但不保留组件标签，只是在内存中缓存组件
            ==> 切换时，页面得组件标签会被删除，但组件实例会保留在内存中
            ==> keepAlive得缓存组件数量越多，对内存占用量也就越大，所以需要控制缓存数量上限
        提供props：
          max:设置最大组件缓存数量(包括正在访问得组件)
              缓存组件得控制，基于时间进行选择，只缓存距离当前时间最近得组件
          include:设置需要被缓存得组件
            -> 依赖于组件内部得name属性配置
          exclude:设置不需要被缓存得组件
            -> 依赖于组件内部得name属性配置
        提供组件补充生命周期(只对缓存组件有效)
          activated 组件从缓存状态切换到显示状态
          deactivated 组件从显示状态切换到缓存状态
      -->
      <!-- <keep-alive :max="2">
        <component :is="page"></component>
      </keep-alive> -->
      <keep-alive include="ChildPageA,ChildPageB">
        <component :is="page"></component>
      </keep-alive>
    </div>
  </div>
</template>

<script>
import ChildPageA from "./ChildPageA";
import ChildPageB from "./ChildPageB";
import ChildPageC from "./ChildPageC";
import ChildPageD from "./ChildPageD";

export default {
  components: {
    ChildPageA,
    ChildPageB,
    ChildPageC,
    ChildPageD,
  },
  data() {
    return {
      page: "ChildPageC",
    };
  },
};
</script>

<style scoped>
.box {
  border: 1px solid black;
  padding: 10px;
}
</style>
